<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    
    <title>WebRTC直播技术 | xilixili.net</title>
    <meta name="renderer" content="webkit">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta name="description" content="前文描述了正常的浏览器端采用WebRTC进行视频通话的方法，也介绍了当前流行的RTMP架构的直播模式，及相关技术等。那么面对WebRTC这项技术，我们是否能够将两者结合呢，即采用WebRTC来进行直播。整好项目中有这样的需求，因此做了一段时间的技术预研，简单分享下。
技术假设想使用WebRTC技术做直播，不可避免的只能采用中心服务器转发。那么问题来了，WebRTC技术中大量的如网络自适应等等优化基">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="WebRTC直播技术 | xilixili.net">
    <meta name="twitter:description" content="前文描述了正常的浏览器端采用WebRTC进行视频通话的方法，也介绍了当前流行的RTMP架构的直播模式，及相关技术等。那么面对WebRTC这项技术，我们是否能够将两者结合呢，即采用WebRTC来进行直播。整好项目中有这样的需求，因此做了一段时间的技术预研，简单分享下。
技术假设想使用WebRTC技术做直播，不可避免的只能采用中心服务器转发。那么问题来了，WebRTC技术中大量的如网络自适应等等优化基">

    <meta property="og:type" content="article">
    <meta property="og:title" content="WebRTC直播技术 | xilixili.net">
    <meta property="og:description" content="前文描述了正常的浏览器端采用WebRTC进行视频通话的方法，也介绍了当前流行的RTMP架构的直播模式，及相关技术等。那么面对WebRTC这项技术，我们是否能够将两者结合呢，即采用WebRTC来进行直播。整好项目中有这样的需求，因此做了一段时间的技术预研，简单分享下。
技术假设想使用WebRTC技术做直播，不可避免的只能采用中心服务器转发。那么问题来了，WebRTC技术中大量的如网络自适应等等优化基">

    
    <meta name="author" content="rangerlee">
    
    <link rel="stylesheet" href="/css/vno.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">

    
    <link rel="icon" href="/images/avatar-small.png">
    

    <meta name="generator" content="hexo"/>
    
    <link rel="alternate" type="application/rss+xml" title="xilixili.net" href="/atom.xml">
    

    <link rel="canonical" href="xilixili.net/2017/11/30/webrtc-live/"/>

                 
</head>

<body class="home-template no-js">
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/js/main.js"></script>
    <span class="mobile btn-mobile-menu">
        <i class="fa fa-list btn-mobile-menu__icon"></i>
        <i class="fa fa-angle-up btn-mobile-close__icon hidden"></i>
    </span>

    
<header class="panel-cover panel-cover--collapsed">
  <div class="panel-main">
    <div class="panel-main__inner panel-inverted">
    <div class="panel-main__content">

        <h1 class="panel-cover__title panel-title"><a href="/" title="访问首页 xilixili.net">xilixili.net</a></h1>
        
        <span class="panel-cover__subtitle panel-subtitle"><!-- 生活と技术の杂记 --></span>
        
        <hr class="panel-cover__divider">
        
        <p class="panel-cover__description">生活と技术の杂记</p>
        
	<hr class="panel-cover__divider panel-cover__divider--secondary">

        <div class="navigation-wrapper">
          <div>
          <nav class="cover-navigation cover-navigation--primary">
            <ul class="navigation">
              <li class="navigation__item"><a href="/#blog" title="访问博客" class="blog-button">博客</a></li>
            
            </ul>
          </nav>
          </div>
          <div>
          <nav class="cover-navigation navigation--social">
  <ul class="navigation">

  <!-- Weibo-->
  

  <!-- Github -->
  
  <li class="navigation__item">
    <a href="https://github.com/rangerlee" title="查看我的GitHub主页" target="_blank">
      <i class="social fa fa-github"></i>
      <span class="label">Github</span>
    </a>
  </li>


<!-- Stack Overflow -->
        

  <!-- Google Plus -->
  

<!-- Facebook -->

  
<!-- Twitter -->

  

  <li class="navigation__item">
    <a href="/atom.xml" title="RSS" target="_blank">
      <i class="social fa fa-rss"></i>
      <span class="label">RSS</span>
    </a>
  </li>


  <li class="navigation__item">
    <a href="mailto:http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=RzUmKSAiNSsiIgchKD8qJi4raSQoKg" title="邮件联系我" target="_blank">
      <i class="social fa fa-envelope"></i>
      <span class="label">Email</span>
    </a>
  </li>


  </ul>
</nav>

          </div>
        </div>

      </div>

    </div>

    <div class="panel-cover--overlay cover-alpha"></div>
  </div> 
</header>
<script type="text/javascript">
var side = document.getElementsByClassName("panel-cover")[0];
function checkWebp() {
	try{
		return(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
	}catch(err) {
		return false;
	}
};

if(checkWebp()) {
	side.style.backgroundImage = "url('/images/background-cover.jpg.webp')";
} else {
	side.style.backgroundImage = "url('/images/background-cover.jpg')";
}
</script>


    <div class="content-wrapper">
        <div class="content-wrapper__inner">
            <article class="post-container post-container--single">

  <header class="post-header">
    <div class="post-meta">
      <time datetime="2017-11-30T09:52:00.000Z" class="post-list__meta--date date">2017-11-30</time> &#8226; <span class="post-meta__tags tags">
  <a class="tag-link" href="/tags/技术/">技术</a>
 </span>
      <span class="page-pv">
       阅读 <span id="busuanzi_value_page_pv"><i class="fa fa-spinner fa-spin"></i></span>
      </span> 
   
    </div>
    <h1 class="post-title">WebRTC直播技术</h1>
  </header>

  <section class="post">
    <p>前文描述了正常的浏览器端采用WebRTC进行视频通话的方法，也介绍了当前流行的RTMP架构的直播模式，及相关技术等。那么面对WebRTC这项技术，我们是否能够将两者结合呢，即采用WebRTC来进行直播。整好项目中有这样的需求，因此做了一段时间的技术预研，简单分享下。</p>
<h3 id="技术假设"><a href="#技术假设" class="headerlink" title="技术假设"></a>技术假设</h3><p>想使用WebRTC技术做直播，不可避免的只能采用中心服务器转发。那么问题来了，WebRTC技术中大量的如网络自适应等等优化基本不太可能实现，即使要实现必然是费时费力，成本过高。另外浏览器支持WebRTC不尽相同，编码格式不尽相同，都需要统一。等等，其实里面的问题还挺多的，暂时因为我们采用H264较多，因此采用H264格式，并且不考虑WebRTC特性，仅做中心转发实现基本的直播。</p>
<h3 id="技术栈"><a href="#技术栈" class="headerlink" title="技术栈"></a>技术栈</h3><p>首先在前文已经了解了WebRTC信令是要单独实现，那么更底层的通信呢，不盗图了。</p>
<ul>
<li>本地ICE采集，会进行穿透内网，采用STUN服务器 ，获取公网地址</li>
<li>获取本地媒体信息，即SDP信息</li>
<li>双方通过信令服务交换媒体信息及ICE采集信息</li>
<li>双方根据ICE信息进行ICE协商（会有很多地址，最终协商出最合适的一个）</li>
<li>成功后，双方进行DTLS握手协商</li>
<li>成功后，即可以采用SRTP加密RTP包，然后通过ICE通道互传</li>
</ul>
<p>基本上是这么个逻辑，我们想要实现直播，基本上就是让我们的程序作为一端，并且在SDP中设置本地为<code>sendonly</code>，浏览器端为<code>recvonly</code>(前篇博客已讲)。</p>
<h3 id="动手实现"><a href="#动手实现" class="headerlink" title="动手实现"></a>动手实现</h3><p>在实现时候，有很多开源代码参考，WebRTC源码也可以参考，只不过里面的signal机制太多了。这里列一下一些可以采用的库</p>
<ul>
<li>ICE开发库：nice（依赖glib太多），pjnath（pjsip也支持srtp，不太熟没使用）等</li>
<li>DTLS开发库：OpenSSL等（分支库及相关库太多）</li>
<li>SRTP：libsrtp（除思科的外，貌似没其他库了吧）</li>
</ul>
<p>大概思路是采用ICE库进行ICE信息采集及ICE协商（通过交换采集信息后），ICE采集支持一条一条返回，我都是直接等采集完成后再交换信息的，相对较慢。DTLS协商采用支持DTLS的库都行，协商之后结果要给libsrtp库，以方便后续RTP数据的加密。这里面的RTP协议，我没有采用其他库来实现，完全实现自己打包。基本是按照协议，为了简单我采用了简单打包模式及FuA打包两种，相对都比较简单，具体可百度，文档资料很多。</p>
<p>需要注意的是要实现直播肯定是多用户连接，这个时候从性能方面考虑需要实现IO异步化。RTP的发送由于是UDP协议，尽量保证实时发送，不要做异步发送。</p>
<h3 id="效果演示"><a href="#效果演示" class="headerlink" title="效果演示"></a>效果演示</h3><p>暂时我调测都只采用了一条ICE通道，只用来传H264视频。想要音频，需要协商时候开辟两条ICE通道。服务读取本地<code>tears_of_steel_720p.mp4</code>文件，发送H264编码视频，谷歌浏览器显示效果</p>
<p><picture class="picture"><source type="image/webp" srcset="/2017/11/30/webrtc-live/20171130181710.png.webp"><img class="image" src="/2017/11/30/webrtc-live/20171130181710.png" alt=""></picture></p>
<p>上图是在Chrome开发者工具下，按Ctrl+Shift+P，输入<code>full size screenshot</code>生成的网页截图。</p>

  </section>

</article>

<section class="read-more">
           
    
               
            <div class="read-more-item">
                <span class="read-more-item-dim">最近的文章</span>
                <h2 class="post-list__post-title post-title"><a href="/2017/12/19/ffmpeg-decode-video-frame-lost/" title="ffmpeg视频解码丢帧问题">ffmpeg视频解码丢帧问题</a></h2>
                <p class="excerpt">
                
                视频解码的时候，av_read_frame出来的包进行avcodec_decode_video2解码，有时候got_frame为0，即没有数据。一般来讲每一帧都是一帧图像，按道理肯定是有图像的，但却没有，依此下去最终在文件结尾处依然是少部分数据，难不成数据丢了？
                &hellip;
                </p>
                <div class="post-list__meta"><time datetime="2017-12-19T03:16:00.000Z" class="post-list__meta--date date">2017-12-19</time> &#8226; <span class="post-list__meta--tags tags">
  <a class="tag-link" href="/tags/技术/">技术</a>
</span><a class="btn-border-small" href="/2017/12/19/ffmpeg-decode-video-frame-lost/">继续阅读</a></div>
                           
            </div>
        
        
               
            <div class="read-more-item">
                <span class="read-more-item-dim">更早的文章</span>
                <h2 class="post-list__post-title post-title"><a href="/2017/11/16/about-webrtc-on-browser/" title="关于浏览器端WebRTC的使用">关于浏览器端WebRTC的使用</a></h2>
                <p class="excerpt">
                
                WebRTC被开源后是越来越火，主要应该是第一是里面的各种音视频及通信技术，第二是浏览器无插件实现P2P模式的视频通话。之前很有兴趣玩这玩意，最终也是浅尝辄止。最近工作上也开始搞这块东西，又从头仔细研究了下，随便做点记录。
起因虽然说浏览器端，但是标题这么起，其实肯定最终不是简单的JS API调用，因为我要做的是直播，肯定不是P2P的一对一，但好歹也是要在浏览器上做，就先记录下浏览器上测试使用的简单方法吧。
                &hellip;
                </p>
                <div class="post-list__meta"><time datetime="2017-11-16T11:23:00.000Z" class="post-list__meta--date date">2017-11-16</time> &#8226; <span class="post-list__meta--tags tags">
  <a class="tag-link" href="/tags/技术/">技术</a>
</span><a class="btn-border-small" href="/2017/11/16/about-webrtc-on-browser/">继续阅读</a></div>
                       
            </div>
        
     
   
   
  
</section>



	<script>
	(function(){
		var bp = document.createElement('script');
		var curProtocol = window.location.protocol.split(':')[0];
		if (curProtocol === 'https') {
			bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
		}
		else {
			bp.src = 'http://push.zhanzhang.baidu.com/push.js';
		}
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(bp, s);
	})();
	</script>



<script>
(function(){
var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?8612a7fa26d7ba4562be733ae33649b1":"https://jspassport.ssl.qhimg.com/11.0.1.js?8612a7fa26d7ba4562be733ae33649b1";
document.write('<script src="' + src + '" id="sozz"><\/script>');
})();
</script>



            <footer class="footer">
    <span class="footer__copyright">
        &copy; 2023 rangerlee - 本站点采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>
       
    </span>
    <span class="footer__copyright">
             - 本站基于开源 <a href="http://hexo.io">Hexo</a> 搭建，采用 <a href="https://github.com/rangerlee/hexo-theme-new-vno">hexo-theme-new-vno</a> 主题，修改自 <a href="https://github.com/monniya/hexo-theme-new-vno ">new-vno</a> 主题  <a href="http://www.beian.miit.gov.cn">皖ICP备16009457号</a>
         </span>
       
    
    
</footer>


        </div>
    </div>

     
    
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?bab4f71524319c10819bcae280021624";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);
        })();
    </script>



    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    
    
</body>
</html>
